import React, { useState, useEffect } from 'react';
import { connect, history, Dispatch } from 'umi';

import { Layout, Menu } from 'antd';
import { MonitorOutlined, FundOutlined, FileTextOutlined } from '@ant-design/icons';

const { Content, Sider } = Layout;

interface SelfQueryProps {
  dispatch: Dispatch;
}

const SelfQuery: React.FC<SelfQueryProps> = (props) => {
  const [key, setKey] = useState<string>('subscribe');

  // 页面路由跳转
  const jump = (key: string) => {

    setKey(key);
    if (key === 'subscribe') {
      history.push(`/selfquery`);
    } else {
      history.push(`/selfquery/${key}`);
    }
  };

  useEffect(() => {
    const {pathname} = history.location;
    if (pathname === '/selfquery') {
      setKey('subscribe');
    } else {
      setKey(pathname.replace('/selfquery/', ''));
    }
  }, []);

  return (
    <Layout style={{ background: '#fff', height: 'calc(100vh - 84px)', overflow: 'hidden'}}>
      <Sider width={146}>
        <Menu
          mode="inline"
          selectedKeys={[key]}
          style={{ height: '100%' }}
          onClick={(e) => jump(e.key)}
        >
          <Menu.Item key="subscribe">
            <MonitorOutlined style={{ marginRight: '5px' }} />
            我的订阅
          </Menu.Item>
          <Menu.Item key="panel">
            <FundOutlined style={{ marginRight: '5px' }} />
            看板中心
          </Menu.Item>
          <Menu.Item key="index">
            <FileTextOutlined style={{ marginRight: '5px' }} />
            指标库
          </Menu.Item>
        </Menu>
      </Sider>
      <Content>{props.children}</Content>
    </Layout>
  );
};

export default connect(({}) => ({}))(SelfQuery);
